<template>
    <div id="register">
      <van-nav-bar
        title=""
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="zc">注册</div>
      <div class="register">
        <div class="help-input">
          <img src="../../static/img/icon_sj@3x.png"/>
          <input type="number" placeholder="请输入手机号" v-model="phone">
        </div>
        <div class="help-input">
          <img src="../../static/img/icon_mm@3x.png"/>
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
      </div>
      <div class="sub" @click="register">注册</div>
    </div>
</template>

<script>
    export default {
      name: "register",
      data(){
        return {
          phone:'18833234045',
          password:'2341',
        }
      },
      methods: {
        onClickLeft() {
          this.$router.go(-1)
        },
        register(){
          var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
          if(this.phone==''){
            this.$toast('请输入手机号');
            return false;
          }else if(!reg.test(this.phone)){
            this.$toast('手机格式不正确');
            return false;
          }else if(this.password=="") {
            this.$toast('请输入密码');
            return false;
          }
          var params = new URLSearchParams();
          params.append('phone', this.phone);       //你要传给后台的参数值 key/value
          params.append('password', this.password);
          this.$POST('/login/userReg',params,true).then(res =>{
            if(res.meta.code===200 && res.meta.msg==='OK'){
              this.$router.push({path: '/login'});
            }else{
              this.$toast('手机号已经被注册了');
            }
          }).catch(res=>{
            console.log(res);
          })
        }
      },

    }
</script>

<style scoped>
 .register{
   width: 80%;
   margin: 0 auto;
 }
  .zc{
    text-align: center;
    font-size: 20px;
    margin-bottom:60px;
    margin-top: 20px;
  }

 .help-input{
   text-align: left;
   border-bottom: 1px solid #bfbfbf;
   padding-bottom: 10px;
   margin-bottom:25px;
 }
 .help-input>img{
   display: inline-block;
   width: 20px;
   position: relative;
   top:8px;
   margin-left: 5px;
 }
 .help-input>input{
   width:60%;
   border: 0;
   font-size: 18px;
   margin-left: 5px;
 }
 .sub{
   width: 80%;
   margin: 0 auto;
   border-radius: 30px;
   background: linear-gradient(to right, #fe5741 , #fd6c46,#fc7f4a);
   height: 45px;
   line-height: 45px;
   color: #ffffff;
   font-size: 18px;
   margin-top: 50px;
 }
</style>
<style>
  .van-hairline--bottom::after{
    border-bottom: 0;
  }
  .van-nav-bar .van-icon{
    color: #000;
    font-size: 20px;
  }
</style>
